<template>
  <!-- 导航栏 -->
  <el-menu mode="horizontal" class="nav-menu" :default-active="activeIndex">
    <el-menu-item index="1" @click="$router.push('/')" class="nav-item">首页</el-menu-item>
    
    <!-- 教学设计 - 直接跳转到新的设计 -->
    <el-menu-item index="2" @click="$router.push('/design/new')" class="nav-item">教学计划</el-menu-item>

    <!-- 教学资源 - 直接跳转到多媒体资源 -->
    <el-menu-item index="3" @click="$router.push('/resources/video')" class="nav-item">教学资源</el-menu-item>

    <!-- 学情分析 - 直接跳转到学情分析页面 -->
    <el-menu-item index="4" @click="$router.push('/study/analysis')" class="nav-item">学情分析</el-menu-item>

    <!-- 习题生成 - 直接跳转到习题定制 -->
    <el-menu-item index="5" @click="$router.push('/homework/generator')" class="nav-item">习题库</el-menu-item>

    <div class="flex-grow" />
    <template v-if="!userStore.token">
      <el-menu-item index="6" @click="$router.push('/login')" class="auth-item">登录/注册</el-menu-item>
    </template>
    <template v-else>
      <div class="welcome-message">欢迎回来：{{ teacherName }}</div>
      <el-menu-item index="7" @click="$router.push('/profile')" class="auth-item">个人设置</el-menu-item>
      <el-menu-item index="9" @click="handleLogout" class="auth-item">退出</el-menu-item>
    </template>
  </el-menu>
</template>

<style>
.nav-menu {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保导航栏在最顶层 */
  padding: 0 20px;
  background-color: #1a73e8; /* 修改为鼠标悬停时的颜色 */
  border-bottom: none;
  display: flex;
  align-items: center;
}

.nav-menu :deep(.el-menu-item),
.nav-menu :deep(.el-sub-menu__title) {
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s ease;
  height: 60px;
  line-height: 60px;
  background-color: #1a73e8; /* 添加默认背景色 */
}
/* 确保激活状态颜色一致 */
.nav-menu :deep(.el-menu-item.is-active),
.nav-menu :deep(.el-sub-menu__title.is-active) {
  background-color: #1a73e8; /* 更亮的蓝色背景 */
  color: #ffffff !important; /* 白色文字 */
}

.nav-item {
min-width: 120px;
text-align: center;
}

.auth-item {
min-width: 100px;
text-align: center;
font-size: 16px;
padding: 0 20px;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}

.welcome-message {
  color: #ffffff;
  font-size: 16px;
  margin-right: 15px;
  height: 60px;
  line-height: 60px;
  font-weight: 500;
}

.nav-menu :deep(.el-menu-item) {
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}

.nav-menu :deep(.el-menu-item:hover),
.nav-menu :deep(.el-sub-menu__title:hover) {
background-color: #1a73e8;
color: #ffffff;
}

.nav-menu :deep(.el-menu-item.is-active) {
background-color: #1a73e8;
color: #ffffff;
}

.nav-menu :deep(.el-menu-item.is-active:not(.nav-item)) {
background-color: #1a73e8;
color: #ffffff;
}

.nav-menu :deep(.nav-item.is-active) {
background-color: transparent !important;
color: #ffffff !important;
}

.nav-menu :deep(.nav-item.is-active:hover) {
background-color: #1a73e8 !important;
color: #ffffff !important;
}

.nav-menu :deep(.el-sub-menu.is-active .el-sub-menu__title) {
color: #ffffff;
}
/* 子菜单背景颜色 */
.nav-menu :deep(.el-menu--popup) {
  background-color: #1a73e8 !important; /* 修改为鼠标悬停时的颜色 */
  border: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  position: absolute !important;
  top: 60px !important;
  left: 0 !important;
  z-index: 1000 !important;
}
/* 子菜单项样式 */
.nav-menu :deep(.el-menu--popup .el-menu-item) {
  color: #ffffff !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 20px !important;
  transition: all 0.3s ease !important;
  min-width: 120px !important;
  text-align: center !important;
  background-color: #1a73e8 !important; /* 修改为鼠标悬停时的颜色 */
}
/* 子菜单项悬停状态 */
.nav-menu :deep(.el-menu--popup .el-menu-item:hover) {
background-color: #1a73e8 !important;
color: #ffffff !important;
}
/* 子菜单项激活状态 */
.nav-menu :deep(.el-menu--popup .el-menu-item.is-active) {
background-color: #1a73e8 !important;
color: #ffffff !important;
}

.nav-menu :deep(.el-sub-menu__title) {
  color: #ffffff !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  height: 60px !important;
  line-height: 60px !important;
  min-width: 120px !important;
  text-align: center !important;
  background-color: #1a73e8 !important; /* 修改为鼠标悬停时的颜色 */
}

.nav-menu :deep(.el-sub-menu__title:hover) {
background-color: #1a73e8 !important;
color: #ffffff !important;
}

.flex-grow {
flex-grow: 1;
}

/* 确保所有菜单项文字颜色为白色 */
.nav-menu :deep(.el-menu-item),
.nav-menu :deep(.el-sub-menu__title),
.nav-menu :deep(.el-sub-menu__title span),
.nav-menu :deep(.el-menu-item span) {
  color: #ffffff !important;
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
// import { useUIStore } from '@/stores/ui'
import { useUserStore } from '@/stores/user'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// const uiStore = useUIStore()
const userStore = useUserStore()
// const showLoginDialog = ref(false)

// 添加activeIndex，默认为'1'
const activeIndex = ref('1')
const teacherName = ref('');

onMounted(() => {
  // 从本地存储获取教师姓名
  teacherName.value = localStorage.getItem('teacherName') || '教师';
});

const handleLogout = async () => {
  try {
    // 清除所有存储的用户信息
    localStorage.removeItem('token');
    localStorage.removeItem('teacherId');
    localStorage.removeItem('teacherName');
    localStorage.removeItem('tokenExpireTime');
    
    // 清除axios默认请求头中的认证信息
    delete axios.defaults.headers.common['Authorization'];
    
    // 重置store中的用户信息
    await userStore.logout();
    
    // 弹出提示
    ElMessage.success('退出登录成功');
    
    // 跳转到登录页
    router.push('/login');
  } catch (error) {
    console.error('退出失败:', error);
    ElMessage.error('退出登录失败，请重试');
  }
};
// export default {
//   name: 'NavBar',
//   methods: {
//     showLoginModal() {
//       this.$store.commit('setShowLoginModal', true)
//     }
//   }
// }
const router = useRouter()
const route = useRoute()

const goHome = () => {
  if (route.path !== '/') {
    router.push('/')
  } else {
    // 如果已经在首页，可以触发刷新
    window.location.reload()
  }
}
</script>
